<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <div style="width:200px;padding-left: 500px;font-weight: bold;color: #2155c2">
      查看问卷
    </div>
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="200"/>
      <el-table-column prop="name" label="问卷名" width="500"/>
      <el-table-column prop="state" label="状态" width="160"/>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button type="text" size="small" @click="removeQuestionnaire(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="dialogVisible1 = true,form2.id = scope.row.id">编辑</el-button>
          <el-dialog
              v-model="dialogVisible1"
              title="Tips"
              width="30%"
              :before-close="handleClose"
          >
            <el-form ref="form" :model="form2" label-width="80px" :rules="rules2">
              <el-form-item label="问卷名" prop="name">
                <el-input v-model="form2.name"></el-input>
              </el-form-item>
              <el-form-item label="Resources">
                <el-radio-group v-model="form2.state">
                  <el-radio label="关闭"/>
                  <el-radio label="开启"/>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="modify(form2)">
                  提交
                </el-button>
              </span>
            </template>
          </el-dialog>
          <div></div>
          <el-button type="text" size="small" @click="preview(scope.row)">预览</el-button>

          <el-button type="text" size="small" @click="release(scope.row)">发布</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible2"
               title="问卷预览"
               width="30%"
               :before-close="handleClose">
      <preview title="预览" ref="preview"/>
    </el-dialog>
    <el-dialog v-model="dialogVisible3"
               title="发布"
               width="30%"
               :before-close="handleClose">
      <span></span>
      <div style="padding-left: 130px">
        <el-button type="primary" @click="answerQuestionnaire">点击生成链接</el-button>
      </div>
      <div style="padding-top: 30px"><span style="padding-left: 30px" v-html='address' @click="jump"></span>

      </div>


    </el-dialog>

  </div>
</template>

<script>


import request from "@/request/request";
import preview from "@/views/basic/AnswerQuestionnaire/preview"
import {ElMessage} from "element-plus";

export default {
  name: "index.vue",
  components: {preview},
  data() {

    return {
      tableData: [],
      questionData: [],
      questionnaireId: 0,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      form: {
        id:'',
        name:'',
        state:'',
        username:''
      },
      form2:{
        id:'',
        name:'',
        state:'',
        username:''
      },
      address: '',
      buttonVisible: false,
      username:''

    }

  },
  created() {
    this.load()
  },
  methods: {

    load() {
      let token = localStorage.getItem('token')
      this.$http.post("/user/getUserNameByToken",token).then(res=>{
        if(res.statusCode == '200'){
          this.username = res.data
          this.form.username = this.username
          request.post("questionnaire/showQuestionnaire",this.form).then(res => {
            this.tableData = res.data
          })
        }
      })

    },
    update() {
      this.$router.go(0)
    },

    removeQuestionnaire(row) {
      request.post("questionnaire/removeQuestionnaire", row.id).then(res => {

        if (res.statusCode == '200') {
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          this.update()
        } else {
          ElMessage.error('删除失败，问卷处于开放状态')
        }
      }).catch(() => {
        ElMessage.error('删除失败，问卷处于开放状态')
      })

    },
    handleClose() {
      this.address = ''
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.dialogVisible3 = false

    },
    cancel() {
      this.handleClose()
    },
    modify(form) {
      request.post("questionnaire/modifyQuestionnaire", form).then(res => {
        console.log(res)
        this.load()
      })
      this.dialogVisible1 = false
      this.update()

    },
    preview(row) {
      console.log(row.id)
      request.post("question/showQuestionByNaireId", row.id).then(res => {
        this.$nextTick(() => {
          this.$refs.preview.init(res.data);
        });
      })
      this.dialogVisible2 = true

    },

    release(row) {
      this.dialogVisible3 = true
      request.post("question/showQuestionByNaireId", row.id).then(res => {
        this.questionData = res.data
      })
      this.questionnaireId = row.id
    },
    answerQuestionnaire() {
      this.address = 'http://localhost:8080/AnswererLogin/' + this.questionnaireId
      this.copyid(this.address)

    },
    copyid(value){
      let eInput = document.createElement('input')
      eInput.value = value
      document.body.appendChild(eInput)
      eInput.select() //选择对象
      let copyText = document.execCommand('Copy') //执行浏览器的复制命令
      eInput.style.display = 'none'
      if (copyText) this.$message.success('复制成功')
    },
    jump(){
      this.$router.push(`/AnswererLogin/${this.questionnaireId}`)
    }
  }
}


</script>

<style scoped>

</style>